<script setup lang="ts">
import Chat from "@/components/Chat/chat.vue";
import ChatInput from "@/components/ChatInput/ChatInput.vue";
import FullPage from "@/components/Layout/FullPage.vue";
import CommonPopup from "@/components/Popup/Common.vue";
import Lnkyeah from "@/utils/lnkyeah";
import Icon from "@/components/Icon/Icon.vue";
import IgnoreChance from "@/components/Popup/IgnoreChance.vue";
import Header from "@/components/Head/head.vue";

import { onHide, onShow } from "@dcloudio/uni-app";
import { computed, ref } from "vue";
import useIndex from "./hooks";

import useCar from "./hooks/useCar";
import productPopup from "./widget/productPopup.vue";
import detailPopup from "./widget/detailPopup.vue";
// import { shopApiProduct, shopApigSkuList } from "@/api/shopApi";

const { carPopup, showCount, list, showCarPopup, pushProduct } = useCar();

const {
  loginPopup,
  ignoreChance,
  chats,
  hotMessage,
  conversationChat,
  getConversationHistory,
  onSendMessage
} = useIndex();

const detail = ref();

onHide(() => {
  Lnkyeah.instance.socket?.off("chat_text");
  Lnkyeah.instance.socket?.off("chat_text_end");
  Lnkyeah.instance.socket?.off("shop");
  Lnkyeah.instance.socket?.off("chat_product");
  Lnkyeah.instance.socket?.off("chat_bill");
  Lnkyeah.instance.socket?.off("chat_order");

  conversationChat.value = null;
});
onShow(async () => {
  if (Lnkyeah.instance.socket?.active) {
    Lnkyeah.instance.socket?.off("chat_text");
    Lnkyeah.instance.socket?.off("chat_text_end");
    Lnkyeah.instance.socket?.off("shop");
    Lnkyeah.instance.socket?.off("chat_product");
    Lnkyeah.instance.socket?.off("chat_bill");
    Lnkyeah.instance.socket?.off("chat_order");

    let product: any = null;

    // Lnkyeah.instance.socket.on("chat_order", async (e: any) => {
    //   if (e.product_id) {
    //     let productInfo = null;
    //     if (!product) {
    //       const { data } = await shopApiProduct({
    //         mid_id: e.product_id
    //       });
    //       if (data.error_code === 0) {
    //         product = data.data
    //       }
    //     }

    //     if (productInfo) {
    //       const { data: skuData } = await shopApigSkuList({
    //         uuid: product.uuid
    //       });
    //       if (skuData.error_code === 0) {
    //         product.sku = skuData.data;
    //       }
    //     }
    //   }
    // });
    Lnkyeah.instance.socket.on("chat_product", (e: any) => {
      product = {
        content: e.product_info,
        msg_type: 4
      };
      pushProduct(e.product_info);
    });
    Lnkyeah.instance.socket.on("chat_text", (e: any) => {
      if (conversationChat.value) {
        conversationChat.value!.robot.msg += e.text;
      }
    });
    Lnkyeah.instance.socket.on("chat_text_end", () => {
      const chatInset = conversationChat.value;
      if (chatInset) {
        const c: any = [
          {
            question: chatInset.user.question as string,
            answer_list: [
              {
                content: chatInset.robot.msg as string,
                msg_type: 1
              }
            ]
          }
        ];
        if (product) {
          c.push({
            msg: "",
            question: "",
            answer_list: [product]
          });
        }
        chats.value.push(...c);
        product = null;
        if (conversationChat.value) {
          //@ts-ignore
          conversationChat.value = null;
        }
      }
    });
    Lnkyeah.instance.socket.on("shop", (e: any) => {
      if (e?.product_id) {
        detail.value.open(e.product_id);
      }
    });
  }
});
const onToLogin = () => {
  uni.redirectTo({ url: "/pages/login/login" });
  loginPopup.value.hide?.();
};

// onMounted(() => {
//   detail.value.open("4370fb27-314f-470f-a5fd-9757f2e263e3");
// });
</script>

<template>
  <Header :fixed="false" class="head" type="level_1" name="智能AI导购" />
  <FullPage class="page" :show-header="false">
    <Chat
      user-bubble-bg-color="#495BFF"
      user-bubble-text-color="#FFFFFF"
      robot-bubble-bg-color="#F3F3F3"
      robot-bubble-text-color="#333333"
      :chats="chats"
      :conversation-chat="conversationChat"
      @load-more="
        () => {
          getConversationHistory();
        }
      "
      @send-message="onSendMessage"
    ></Chat>
    <Icon :corner="showCount" @click="showCarPopup"> </Icon>
    <template #footer>
      <ChatInput :message="hotMessage" @sendMessage="onSendMessage" />
    </template>
  </FullPage>
  <CommonPopup
    ref="loginPopup"
    height="240px"
    title="登录提示"
    desc="您还未登录，请登录完成后再进行咨询哦~"
    confirmText="去登录"
    cancel-text="none"
    @confirm="onToLogin"
  />
  <!-- 商品详情 -->
  <detailPopup ref="detail" @product="pushProduct" />
  <!-- 商品列表 -->
  <productPopup ref="carPopup" :list="list" />
  <IgnoreChance ref="ignoreChance"></IgnoreChance>
</template>

<style lang="scss" scoped>
.head {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}
.digital-page {
  position: relative;
  width: 100vw;
  height: calc(100vh - 60px - env(safe-area-inset-bottom));
  overflow: hidden;
  .talk-button {
    margin-bottom: 20px;
    margin-left: 20px;
  }
  .digital-chat {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    box-sizing: border-box;
    background: linear-gradient(
      180deg,
      rgba(242, 244, 255, 0) 0%,
      rgba(242, 244, 255, 0.6) 20%,
      #f2f4ff 54.5%
    );
  }
}
.start {
  position: absolute;
  z-index: 11;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
}
.digital-button {
  position: absolute;
  bottom: 10px;
  right: 0;
}
.icon_close {
  width: 40px;
  height: 40px;
  background-image: url("https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/icon_close.png");
  background-size: cover;
  margin: 10px auto 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
